// ES5
// function Lbt(el, option) {
//     this.el = document.querySelector(el)
//     this.num = 1
//     this.t = null
//     this.init()
// }
// Lbt.prototype.init = function () {
//     this.img()
//     this.yqtb()
//     this.yqmouseover()
// }
// Lbt.prototype.img = function () {
//     this.t = setInterval(() => {
//         this.num++
//         if (this.num > 6) this.num = 1
//         let igObj = this.el.querySelector('img')
//         igObj.src = `./imgs/img${this.num}.jpg`
//         this.yqtb()
//     }, 1000)
// }
// Lbt.prototype.yqtb = function () {
//     let liObj = this.el.querySelectorAll('li')
//     liObj.forEach((item) => {
//         item.className = ''
//     })
//     liObj[this.num - 1].className = 'active'
// }
// Lbt.prototype.yqmouseover = function () {
//     let liObj = this.el.querySelectorAll('li')
//     liObj.forEach((item, index) => {
//         item.onmouseover = () => {
//             clearInterval(this.t)
//             this.el.querySelector('img').src = `./imgs/img${index + 1}.jpg`
//             liObj.forEach((item) => {
//                 item.className = ''
//             })
//             liObj[index].className = 'active'
//             this.num = index

//         item.onmouseout = () => {
//             this.img()
//         }
//     }
// })
// }
// ES6
class Lbt {
    constructor(el, option) {
        this.el = document.querySelector(el)
        this.num = 1
        this.t = null
        this.init()
    }
    init() {
        this.img()
        this.yqtb()
        this.yqmouseover()
    }
    img() {
        this.t = setInterval(() => {
            this.num++
            if (this.num > 6) this.num = 1
            let igObj = this.el.querySelector('img')
            igObj.src = `./imgs/img${this.num}.jpg`
            this.yqtb()
        }, 1000)
    }
    yqtb() {
        let liObj = this.el.querySelectorAll('li')
        this.el.querySelector('ul li.active').className = ''
        liObj[this.num - 1].className = 'active'
    }
    yqmouseover() {
        let liObj = this.el.querySelectorAll('li')
        liObj.forEach((item, index) => {
            item.onmouseover = () => {
                clearInterval(this.t)
                this.el.querySelector('img').src = `./imgs/img${index + 1}.jpg`
                liObj.forEach((item) => {
                    item.className = ''
                })
                item.className = 'active'
                this.num = index
            }
            item.onmouseout = () => {
                this.img()
            }
        })
    }
}